<template>
    <div class="dashboard-container boxcontainer">
      <div class="menu-wrapper" :class="{ 'menu-collapsed': isMenuCollapsed }">
        <SideMenu :collapsed="isMenuCollapsed" @toggle-menu="toggleMenu" />
      </div>
      
      <div class="main-content">
        <div class="content-wrapper">
          <TopBar />

          <div class="page-content">
            <slot></slot>
          </div>

          <Footer />
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import SideMenu from './SideMenu.vue'
  import TopBar from './TopBar.vue'
  import Footer from './Footer.vue'
  
  const isMenuCollapsed = ref(false)
  
  const toggleMenu = () => {
    isMenuCollapsed.value = !isMenuCollapsed.value
  }
  </script>
  
  <style scoped>
  .boxcontainer {
    border: 1px solid lightgray;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

  .dashboard-container {
    display: flex;
    min-height: 75vh;
    width: 100%;
    background-color: #f5f5f5;
    padding: 1rem;
  }
  
  .menu-wrapper {
    width: 250px;
    transition: width 0.3s ease;
  }
  
  .menu-wrapper.menu-collapsed {
    width: 60px;
  }
  
  .main-content {
    flex: 1;
    margin-left: 1rem;
  }
  
  .content-wrapper {
    background: white;
    border-radius: 1rem;
    border: 1px solid #e0e0e0;
    min-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
  }
  
  .page-content {
    flex: 1;
    padding: 1rem;
  }
  
  @media (max-width: 768px) {
    .dashboard-container {
      padding: 0.5rem;
    }
    
    .menu-wrapper {
      position: fixed;
      z-index: 1000;
      height: 100vh;
      background: white;
    }
    
    .main-content {
      margin-left: 10px;
    }
  }
  </style>